<template>
  <a-modal
    title="修改头像"
    centered
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    :width="800"
    :footer="null"
    @cancel="close">
    <a-row>
      <a-col :xs="24" :md="12" style="height: 350px">
        <vue-cropper
          ref="cropper"
          :img="options.img"
          :info="true"
          :autoCrop="options.autoCrop"
          :autoCropWidth="options.autoCropWidth"
          :autoCropHeight="options.autoCropHeight"
          :fixedBox="options.fixedBox"
          @realTime="realTime">
        </vue-cropper>
      </a-col>
      <a-col :xs="24" :md="12" style="height: 350px">
        <div class="avatar-upload-preview">
          <img :src="previews.url" :style="previews.img"/>
        </div>
      </a-col>
    </a-row>
    <br>
    <a-row>
      <a-col :lg="2" :md="2">
        <a-upload name="file" :beforeUpload="beforeUpload" :showUploadList="false">
          <a-button icon="upload">选择图片</a-button>
        </a-upload>
      </a-col>
      <a-col :lg="{span: 1, offset: 2}" :md="2">
        <a-button icon="plus" @click="changeScale(1)"/>
      </a-col>
      <a-col :lg="{span: 1, offset: 1}" :md="2">
        <a-button icon="minus" @click="changeScale(-1)"/>
      </a-col>
      <a-col :lg="{span: 1, offset: 1}" :md="2">
        <a-button icon="undo" @click="rotateLeft"/>
      </a-col>
      <a-col :lg="{span: 1, offset: 1}" :md="2">
        <a-button icon="redo" @click="rotateRight"/>
      </a-col>
      <a-col :lg="{span: 2, offset: 6}" :md="2">
        <a-button type="primary" @click="finish">保存</a-button>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
import { uploadPicture } from '@/api/common'

export default {
  name: 'AvatarModal',
  data () {
    return {
      visible: false,
      confirmLoading: false,
      options: {
        img: null,
        // img: 'http://47.113.178.98:8080/common/download?fileName=/profile/upload/2022/10/10/6b2d184f3f9082945a9b7120887b7ff1.jpg',
        // img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        autoCrop: true,
        autoCropWidth: 200,
        autoCropHeight: 200,
        fixedBox: true
      },
      previews: {}
    }
  },
  methods: {
    edit () {
      this.visible = true
    },
    close () {
      this.visible = false
    },
    changeScale (num) {
      num = num || 1
      this.$refs.cropper.changeScale(num)
    },
    rotateLeft () {
      this.$refs.cropper.rotateLeft()
    },
    rotateRight () {
      this.$refs.cropper.rotateRight()
    },
    beforeUpload (file) {
      const _this = this
      const reader = new FileReader()
      // 把Array Buffer转化为blob
      reader.readAsDataURL(file)
      reader.onload = () => {
        _this.options.img = reader.result
      }
      return false
    },
    finish () {
      const _this = this
      const imgData = new FormData()
      if (_this.options.img != null) {
        this.$refs.cropper.getCropBlob((data) => {
          const date = new Date() // 加上时间戳，防止返回相同的照片
          const myFile = new window.File([data], `${date}.png`, { type: data.type }) // 将blob转换为file
          imgData.append('file', myFile)
          uploadPicture(imgData).then((res) => {
            _this.$emit('ok', res)
          }).catch((err) => {
            _this.$message.error(err.response.data.msg || { content: '上传图片失败' })
          })
          this.close()
        })
      }
    },
    realTime (data) {
      this.previews = data
    }
  }
}
</script>

<style lang="less" scoped>
  .avatar-upload-preview {
    position: absolute;
    top: 50%;
    transform: translate(50%, -50%);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    box-shadow: 0 0 4px #ccc;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }
</style>
